<template>
  <van-tabbar route>
    <van-tabbar-item
      v-for="item in newRoutes"
      :key="item.path"
      :icon="item.meta.icon"
      :to="item.path"
    >
      {{ item.meta.title }}
      </van-tabbar-item >
  </van-tabbar>
</template>

<script lang="ts" setup>
// 导入仓库
import useUserStore from '@/store/userInfo'
import { storeToRefs } from 'pinia'
import { computed } from 'vue'
// 实例化
const userStore = useUserStore()
const { TabBarRoutes } = storeToRefs(userStore)

// 计算出要渲染的底部导航
const newRoutes = computed(() => {
  return TabBarRoutes.value.filter((item) => item.meta.isShow)
})
</script>

<script lang="ts">
export default {
  name: 'TabBar'
}
</script>

<style lang="scss" scoped>
:deep .van-tabbar-item{
  width: 75px;
}
</style>
